<template>
	<div class="gdmap">
		<div id="mapBox" style="height: 100%;filter: brightness(70%);"></div>
		<div class="opbox" v-if="pos.length">
			<el-button type="success" @click="backtoOri" icon="el-icon-s-flag" size="mini">回到标记点</el-button>
			<el-button type="primary" @click="backtoOri" icon="el-icon-place" size="mini" round>卫星图 <el-switch v-model="wxtog"
				 active-color="#13ce66" inactive-color="#ff4949" style="margin-left: 5rem;" @change="wxstatus">
				</el-switch>
			</el-button>
			<el-button type="primary" size="mini" round>标记点
				<el-switch v-model="drawtog" active-color="#13ce66" inactive-color="#ff4949" style="margin-left: 5rem;" @change="dwstatus">
				</el-switch>
			</el-button>
			<el-button type="danger" size="mini" round @click='cl' >清除标记</el-button>
			<el-button type="info" size="mini" round @click='pop'>打开弹窗</el-button>
			<el-button  type="warning" :disabled="true" icon="el-icon-video-camera-solid" size="mini">鼠标左键移动/右键控制视角</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'gdmap',
		data() {
			return {
				pos: [],
				wxtog: false,
				drawtog: false
			}
		},
		methods: {
			pop() {
				this.infoWindow.open(this.map, this.pos)
			},
			cl() {
				this.map.remove(this.overlays)
				this.overlays = []
			},
			dwstatus(e) {
				if (e) {
					this.mouseTool.marker(); //可配置
				} else {
					this.mouseTool.close() //不填为关闭绘图 , true为关闭并且清除图形  使用remove(overlays)可清除指定的图形
				}
			},
			wxstatus(e) {
				if (e) {
					this.map.add(this.wx)
				} else {
					this.map.remove(this.wx)
				}
			},
			backtoOri() {
				this.map.setZoomAndCenter(18, this.pos)
			},
			onComplete(data) {
				// 经纬度标准写法	(Lng, Lat); 
				this.pos = [data.position.lng, data.position.lat]
				let marker = new AMap.Marker({ //标记点插件
					/*
					图片位置不同,路径写法不同
					assets    =>  require('../assets/logo.png')
					public    =>  /headPic.jpg
					网络图片   => https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png  
					icon: '/headPic.jpg',
					<span>' + data.formattedAddress +
						'</span>
					*/
					content: '<div class="msgbox"><span>YOU ARE FUCKING HERE !</span><img src="/111.jpg"class="hp"/></div>',
					position: [data.position.lng, data.position.lat]
				})

				let circle = new AMap.Circle({
					center: new AMap.LngLat(data.position.lng, data.position.lat), // 圆心位置
					radius: 50, //半径
					strokeColor: "#40ff56", //线颜色
					strokeOpacity: 1, //线透明度
					strokeWeight: 2, //线粗细度
					fillColor: "#0beee7", //填充颜色
					fillOpacity: 0.35 //填充透明度
				})
				this.map.add(new AMap.TileLayer.RoadNet())
				this.map.add(this.trafficLayer)
				this.map.add([marker, circle]);
				this.map.setZoomAndCenter(18, [data.position.lng, data.position.lat]) // setCenter 仅设置位置 setZoom 仅设置缩放
				//this.map.setFitView(); //围绕中心点设置合适缩放和视野范围  可传入数组 来适配覆盖物视角范围
			}
		},
		mounted() {
			this.wx = new AMap.TileLayer.Satellite()
			this.$store.commit('setload', false)
			this.map = new AMap.Map("mapBox", {
				resizeEnable: true,
				zoom: 18, //3-18   缩放等级
				layers: [], //设置图层,可设置成包含一个或多个图层的数组  new AMap.TileLayer.Satellite()
				//center: [116.397428, 39.90923], //当前中心位置(经纬度)
				viewMode: '3D', //开启3d
				pitch: 75, //倾斜度数  0-83
				lang: 'zh_cn', //语言
				mapStyle: 'amap://styles/fresh', //样式
				terrain: true // 开启地形图  v2.1beta特权(特别卡)
			})

			//v2.0版本支持  添加地图控件
			// AMap.plugin(['AMap.HawkEye'], () => {
			// 	this.map.addControl(new AMap.HawkEye({
			// 		isOpen: true
			// 	}))
			// })


			this.infoWindow = new AMap.InfoWindow({
				content: '你在干嘛呢?' //传入 dom 对象，或者 html 字符串
			})

			this.map.plugin(["AMap.MouseTool"], () => {
				this.mouseTool = new AMap.MouseTool(this.map)
				this.overlays = [];
				this.mouseTool.on('draw', (e) => {
					this.overlays.push(e.obj);
					console.log(this.overlays)
				})
			})

			// this.mouseTool = new AMap.MouseTool(this.map)
			// this.overlays = [] //你所绘制的覆盖物
			// this.mouseTool.on('draw', function(e) {
			// 	console.log(e)
			// 	overlays.push(e.obj);
			// })

			this.map.on('click', function(ev) {
				var target = ev.target; // 触发事件的对象

				var lnglat = ev.lnglat; // 触发事件的地理坐标，AMap.LngLat 类型

				var pixel = ev.pixel; // 触发事件的像素坐标，AMap.Pixel 类型

				var type = ev.type; // 触发事件类型
			})

			this.trafficLayer = new AMap.TileLayer.Traffic({ //交通路线插件
				zIndex: 10
			})

			AMap.plugin('AMap.Geolocation',
				() => {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, // 是否使用高精度定位，默认：true					
						timeout: 10000, // 设置定位超时时间，默认：无穷大
						// buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
						// zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false				
						// buttonPosition: 'RB' //  定位按钮的排放位置,  RB表示右下
					})

					geolocation.getCurrentPosition((status, result) => {
						if (status == 'complete') {
							this.onComplete(result)
						}
					})
				}
			)
			//后续交互控制代码
			// this.map.setFeatures(['road', 'bg', 'building'])
		}
	}
</script>
<style lang='scss'>
	.gdmap {

		.amap-info-content,
		.amap-info-outer {
			color: red;
		}

		width: 100%;
		height: 100%;
		position: relative;

		.msgbox {
			//点标记偏移
			transform: translate(-50%, -50%);
			width: 500rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.hp {
				width: 30rem;
				height: 30rem;
				border-radius: 50%;
			}

			span {
				color: RED;
				font-weight: bold;
			}
		}

		.opbox {
			position: absolute;
			top: 0;
			width: 100%;
			padding: 10rem 10rem 0;
			display: flex;
			align-items: center;
		}
	}
</style>
